<style scoped lang="scss">
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.login-formbox {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 8px;
}

.loginbox-top {
  width: 90%;
  height: .4267rem;
  margin: 0 auto;
  margin-top: .5rem;
  @include flex-space-between-center;
  margin-bottom: 20px;
  color: $color-gray;

  span {
    font-size: .4733rem;
  }

  p {
    font-size: .4267rem;
  }
}

.loginbox-center {
  width: 80%;
  height: 7rem;
  margin: 0 auto;
  margin-top: 2rem;

  h4 {
    font-size: .6rem;
    font-weight: $font-weight-500;
    margin-bottom: 20px;
  }

  input {
    width: 90%;
    height: 1.3rem;
    margin-bottom: 20px;
    padding: 0 10px;
    font-size: .3733rem;
    background: rgba(238, 238, 238, 0.36);
    @include border-0;
    border-radius: $border-radius-5px;
  }

  input:focus {
    outline: none;
  }

  p {
    font-size: .3267rem;
    color: $color-login-btn;
    margin-bottom: 1rem;
  }

  button {
    width: 95%;
    height: 1.2rem;
    margin: 0 auto;
    font-size: .4733rem;
    color: #fff;
    background-color: $color-login-btn-red;
    @include border-0;
    border-radius: $border-radius-5px;
  }
}

// 进入动画（原有逻辑整合到这里）
.login-modal-enter-active {
  animation: loginModalFadeIn 0.5s ease-in-out;
}

// 离开动画（新增）
.login-modal-leave-active {
  animation: loginModalFadeOut 0.5s ease-in-out;
}

@keyframes loginModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes loginModalFadeOut {
  from {
    opacity: 1;
    transform: translateY(0%); // 开始状态：正常显示
  }

  to {
    opacity: 0;
    transform: translateY(100%); // 结束状态：向下滑出+透明
  }
}
</style>
<template>
  <Transition name="login-modal">
    <teleport to="body" v-if="userStore.showLoginModal">
      <div class="login-modal">
        <!-- 遮罩层 -->
        <div class="mask" @click="userStore.hideLogin"></div>
        <!-- 登录表单 -->
        <div class="login-formbox">
          <div class="loginbox-top">
            <span class="iconfont icon-cuowuguanbiquxiao" @click="userStore.hideLogin"></span>
            <p @click="registerStore.showRegister">注册账号</p>
          </div>
          <div class="loginbox-center">
            <h4>登录后即可展示自己</h4>
            <input type="text" name="" id="" placeholder="输入邮箱" v-model="email">
            <input type="password" name="" id="" placeholder="输入密码" v-model="password">
            <p @click="handleForgotPassword">忘记了?找回密码</p>
            <button @click="handleLogin">登录</button>
          </div>
        </div>
      </div>
    </teleport>
  </Transition>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user/user.js'
import { loginByPassword } from '@/api/login/emailLogin.js'
import { useRegisterStore } from '@/store/modules/login/Register'
import { useForgotPasswordStore } from '@/store/modules/login/ForgotPassword'
import { getVerifyCodeApi } from '@/api/login/register'
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const registerStore = useRegisterStore()
const forgotPasswordStore = useForgotPasswordStore()
const userStore = useUserStore()
const email = ref('')
const password = ref('')
const instance = getCurrentInstance();
const proxy = instance ? instance.proxy : null;

// 登录逻辑
const handleLogin = async () => {
  try {
    const res = await loginByPassword({ email: email.value, password: password.value })
    console.log(res);
    proxy.$toast({
      message: '登录成功',
      duration: 3000,
      type: 'success',
      color: '#fff',
      bgColor: '#4cd964'
    })


    // 登录成功：更新状态 + 隐藏登录组件
    userStore.isLogin = true
    userStore.hideLogin()
    // 设置用户信息
    userStore.setUserInfo(res.data)
    const userId = res.data.id
    // 登录成功后，跳转到用户首页
    router.push('home')
  } catch (err) {
    console.error('登录失败', err)
    proxy.$toast({
      message: '邮箱或密码错误',
      duration: 3000,
      type: 'error',
      color: '#fff',
      bgColor: '#ff3b30'
    })
  }
}
// 找回密码
const handleForgotPassword = async () => {
  const res = await getVerifyCodeApi(email.value)
  try {
    console.log(res);
    if (res.code === 200) {
      // 设置邮箱
      forgotPasswordStore.setEmail(email.value)
      // 显示忘记密码组件
      forgotPasswordStore.showForgotPassword()
    }
  } catch (error) {
    console.error('找回密码失败', error)
    proxy.$toast({
      message: '邮箱错误',
      duration: 3000,
      type: 'error',
      color: '#fff',
      bgColor: '#ff3b30'
    })
  }
}
</script>